<template>
  <el-drawer
    size="50%"
    class="custom-drawer"
    :visible.sync="drawer"
    :direction="direction"
    :with-header="false"
  >
    <div class="title"><h3>{{ title }}</h3></div>
    <div class="body" style="padding-bottom: 500px">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="基本信息" name="1">
          <el-card class="title-card" shadow="none">
            <div slot="header" class="title-card-header">
              基本信息
            </div>
            <el-form ref="editForm" disabled :model="ruleForm" label-position="top" label-suffix=" :">
              <el-form-item label="应用名称" prop="name">
                <el-input v-model="ruleForm.name" />
              </el-form-item>
              <el-form-item label="应用地址" prop="jumpUrl">
                <el-input v-model="ruleForm.jumpUrl" />
              </el-form-item>

              <el-form-item label="服务厂商" prop="service_provider">
                <!--数据来源：字典下拉，字典类型：service_provider-->
                <DictSelect
                  :disabled="true"
                  :value="ruleForm.serviceProvider"
                  type="dict"
                  field="service_provider"
                />
              </el-form-item>
              <el-form-item label="提供部门" prop="canSubscribeDeptId">
                <el-input :value="userInfo.deptName" readonly />
              </el-form-item>

              <el-form-item label="可订阅部门" prop="canSubscribeDeptId">
                <el-radio-group v-model="canSubscribeDeptType" style="flex-shrink: 0;margin-right: 10px">
                  <el-radio :label="1" border>全部委办局</el-radio>
                  <el-radio :label="2" border>部门委办局</el-radio>
                </el-radio-group>
                <ElSelectTree
                  v-show="isShowDeptSelect"
                  v-model="ruleForm.canSubscribeDeptId"
                  style="margin-top: 20px;min-width: 500px;"
                  :data="deptList"
                  multiple
                  node-key="id"
                  :props="{
                    label: 'deptName',
                    children: 'children'
                  }"
                  check-strictly
                />
              </el-form-item>
              <el-form-item label="工具介绍" prop="itselfDesc">
                <el-input v-model="ruleForm.itselfDesc" type="textarea" :rows="5" />
              </el-form-item>
              <el-form-item label="功能描述" prop="functionDesc">
                <el-input v-model="ruleForm.functionDesc" type="textarea" :rows="5" />
              </el-form-item>
              <el-form-item label="业务场景" prop="businessDesc">
                <el-input v-model="ruleForm.businessDesc" type="textarea" :rows="5" />
              </el-form-item>
            </el-form>
          </el-card>
        </el-collapse-item>
        <el-collapse-item title="处理流程" name="2">
          <PublishForm :table-data="tableData" />
        </el-collapse-item>
      </el-collapse>
      <AuditSave v-if="drawer" @save="handleSave" />
    </div>
  </el-drawer>
</template>

<script>
import AuditSave from '@/components/AuditForm'
import PublishForm from '@/components/AuditForm/publishForm'
import { http_dept, http_serve_audit_process, http_serve_publish_app } from '@/api'
import { mapGetters } from 'vuex'
export default {
  name: 'ToolForm',
  components: { AuditSave, PublishForm },
  props: {
    title: String
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      activeNames: ['1', '2', '3'],
      ruleForm: {
        name: '',
        jumpUrl: '',
        serviceProvider: '',
        canSubscribeDeptId: [],
        itselfDesc: '',
        functionDesc: '',
        businessDesc: '',
        detail: ''
      },
      canSubscribeDeptType: 1,
      deptList: [],
      isShowDeptSelect: false,
      detail: {}, // 应用数据
      tableData: [] // 流程数据
    }
  },
  methods: {
    async open(item) {
      this.detail = item
      this.drawer = true
      http_dept.tree().then(res => {
        this.deptList = res
        console.log(this.deptList)
      })
      http_serve_publish_app.read({ id: item.id }).then(res => {
        for (const ruleFormKey in this.ruleForm) {
          this.ruleForm[ruleFormKey] = item[ruleFormKey]
        }
        if (item.canSubscribeDeptId.length) {
          this.isShowDeptSelect = true
          this.canSubscribeDeptType = 2
        } else {
          this.isShowDeptSelect = false
          this.canSubscribeDeptType = 1
        }
      })
      if (item.auditRequestId) {
        http_serve_audit_process.list({ id: item.auditRequestId }).then(res => {
          console.log('res', res)
          this.tableData = res
        })
      }
    },
    async handleSave({ status, files, remark }) {
      // 通过
      if (status) {
        await http_serve_audit_process.pass({
          id: this.detail.auditRequestId
        }, {
          files: files,
          remark
        })
      } else {
        // 驳回
        await http_serve_audit_process.reject({
          id: this.detail.auditRequestId
        }, {
          files: files,
          remark
        })
      }
      this.drawer = false
      // 返回
      this.$emit('save')
    }
  }
}
</script>

<style lang="scss">
.upload-demo2 {
  .el-upload,
  .el-upload-dragger{
    width: 100%;
  }
}
</style>
